<template>
    <div id="seckill">
        <van-nav-bar title="秒杀" left-arrow @click-left="onClickLeft" class="seckillheader" />
        <!-- 商品卡片 -->
        <goods-card></goods-card>
        <!-- 选择尺码 -->
        <van-tabs class="selected">
            <van-tab v-for="index in sizes" :title=" index+'码'" :key="index"></van-tab>
        </van-tabs>
        <!-- 商品介绍 -->
        <goods-info></goods-info>
        <van-button type="danger" class="buynowBtn" @click="onClickBuynow">立即购买</van-button>
    </div>
</template>
<script>
//引入组件
import GoodsCard from "./Goodcard";
import GoodsInfo from "./GoodsInfo";

export default {
    name:"seckillDetail",
    //首页传过来的
    props:["goodsImage","goodsName","goodsNowPrice","goodsBeforePrice,goodsId"],
    data() {
        return {
            name:"SeckillGoods",
            //选择尺码
            sizes: ["36", "37", "38", "39", "40", "41", "42"],
        };
    },
    methods: {
        onClickLeft() {
            this.$router.go(-1);
        },
        onClickBuynow() {
            this.$router.push({ path: "/paying" });
        }
    },
    components: {
        GoodsCard,
        GoodsInfo
    },
    mounted(){
        this.id = this.$route.params.id;
        this.$router.beforeEach((to,from,next)=>{
            if(to.meta.auth){
                if(localStorage.getItem('user')){
                    //如果用户已经登陆过了，直接放行
                    next();
                }else{
                    //否则需要用户先登录
                    next({
                        path:'/login'
                    });
                }
            }else{
                //直接放行
                next();//如果不调用next会卡住页面
            }
        })
    },
};
</script>
<style scoped >
/*头部样式*/
.seckillheader {
    position: fixed;
    width: 100%;
    top: 0;
    background-color: #ff6341;
}
.van-nav-bar .van-icon {
    color: white;
}
.van-nav-bar__title {
    color: white;
}

/*立即购买按钮样式*/
.buynowBtn {
    position: fixed;
    bottom: 0.286667rem;
    left: 0.533333rem;
    color: white;
    background-color: #ff5733;
    height: 1rem;
    line-height: 1rem;
    width: 90%;
    text-align: center;
    border-radius: 0.4rem;
    box-shadow: 0 0.08rem 0.08rem rgba(0, 0, 0, 0.3);
}
</style>